import React, { PureComponent } from 'react';
import { Table, message as msg } from 'antd';
import { connect } from 'dva';

@connect(({ userRole, loading }) => ({
  list: userRole.list,
  selectRoleKeys: userRole.selectRoleKeys,
  user: userRole.user,
  loading: loading.effects['userRole/fetch'],
  submitting: loading.effects['userRole/update'],
}))
class UserRoleList extends PureComponent {

  columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (text, record, index) => index + 1,
    },
    {
      title: '角色名',
      dataIndex: 'roleName',
    },
    {
      title: '角色编码',
      dataIndex: 'roleCode',
    },
  ];

  onSelectRoleChange = (selectedRowKeys) => {
    const selectRoleKeys = selectedRowKeys;
    const { dispatch } = this.props;
    dispatch({
      type: "userRole/update",
      payload: { selectRoleKeys }
    }).then(({ code, message }) => {
      if (code === 0) {
        msg.success('操作成功');
      } else {
        msg.error(message);
      }
    });
  };

  render() {
    const { list, selectRoleKeys, loading } = this.props;
    const roleSelection = {
      selectedRowKeys: selectRoleKeys,
      type: "checkbox",
      onChange: this.onSelectRoleChange
    };

    return (
      <Table
        rowKey="roleId"
        size="middle"
        columns={this.columns}
        loading={loading}
        dataSource={list}
        pagination={false}
        rowSelection={roleSelection}
      />
    );
  }
}

export default UserRoleList;
